<template>
	<view class="mall_pay">
		<view class="order_info">
			<view class="info">
				<view class="left">订单编号</view>
				<view class="right">{{order_num}}</view>
			</view>
			<view class="info">
				<view class="left">订单金额</view>
				<view class="right" style="color: #FF6230;">￥{{pay_money}}</view>
			</view>
		</view>
		<!--  -->
		<view class="order_img">
			<view class="title">上传支付凭证</view>
			<view class="image" @click="upImgBtn">
				<image v-if="fullurl" :src="fullurl" mode="aspectFill"></image>
				<image v-else src="@/static/images/upImg2.png" mode=""></image>
			</view>
			<view class="btn" @click="moreBtn">查看转账账号</view>
		</view>
		<!-- 底部 -->
		<BottomBtn title='支付' @submit='submitBtn'></BottomBtn>
		<!-- 支付信息 -->
		<PayInfo ref="pay_info" :info='bankInfo'></PayInfo>
	</view>
</template>

<script>
	import BottomBtn from '@/components/bottom_btn/bottom_btn.vue';
	import PayInfo from '@/components/pay_info/pay_info.vue';
	export default {
		components:{
			BottomBtn,
			PayInfo
		},
		data() {
			return {
				id:'',
				order_num:'',
				pay_money:'',
				bankInfo:{
					name:'',
					bank:'',
					number:''
				},
				url:'',
				fullurl:'',
			};
		},
		onLoad(opt) {
			this.id=opt.id
			this.orderInfo()
		},
		methods:{
			// 获取订单信息
			orderInfo(){
				var that = this
				that.$tips.showLoading('提交中')
				var params = {
					order_id:that.id,
					is_shop:1,
				}
				that.$httpApi.orderInfo(params).then((res)=>{
					that.$tips.hideLoading()
					if(res.code==1){
						this.order_num=res.data.order_num
						this.pay_money=res.data.pay_money
						var obj = {
							name:res.data.payee,
							bank:res.data.opening_bank,
							number:res.data.card_number,
						}
						this.bankInfo=obj
					}
				})
			},
			// 上传图片
			upImgBtn(){
				var that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						that.$tips.showLoading('上传中')
						const uploadTask = uni.uploadFile({
							url: that.$baseVal.baseUrl+'/api/Common/upload',
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								'token': uni.getStorageSync('token')
							},
							formData: {
								'type':'platform_certificate'
							},
							success: function(uploadFileRes) {
								that.$tips.hideLoading()
								var res = JSON.parse(uploadFileRes.data)
								if(res.code==1){
									that.fullurl=res.data.fullurl
									that.url=res.data.url
								}
							}
						});
					},
					error: function(e) {
						// console.log(e);
					}
				})
			},
			// 查看
			moreBtn(){
				this.$refs.pay_info.openBtn()
			},
			// 支付
			submitBtn(){
				var that = this
				if(this.url==''){
					that.$tips.showToast('请上传支付凭证')
					return
				}else{
					that.$tips.showLoading('提交中')
					var params = {
						order_id:that.id,
						image:that.url
					}
					that.$httpApi.payUpload(params).then((res)=>{
						that.$tips.hideLoading()
						if(res.code==1){
							that.$tips.showToast('提交成功')
							setTimeout(function(){
								uni.switchTab({
									url:'/pages/order/order'
								})
							},2000)
						}
					})
				}
			},
		}
	}
</script>

<style lang="less">
	.mall_pay{
		width: 100%;
		padding-top: 24rpx;
		.order_info{
			width: 100%;
			padding: 20rpx 32rpx;
			background: #fff;
			.info{
				width: 100%;
				height: 70rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}
				.right{
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
				}
			}
		}
		.order_img{
			width: 100%;
			margin-top: 24rpx;
			padding: 28rpx 32rpx 40rpx;
			background: #fff;
			.title{
				width: 100%;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
			}
			.image{
				width: 100%;
				height: 160rpx;
				margin: 50rpx 0 70rpx;
				image{
					display: block;
					width: 160rpx;
					height: 160rpx;
					margin: auto;
				}
			}
			.btn{
				width: 320rpx;
				height: 80rpx;
				line-height: 80rpx;
				margin: auto;
				border-radius: 40rpx;
				text-align: center;
				color: #26C281;
				border: 1rpx solid #26C281;
			}
		}
	}
</style>
